<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <base href="${pageContext.request.contextPath}/">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页 - 光年(Light Year Admin)后台管理系统模板</title>

</head>

<body data-logobg="color_8" data-headerbg="color_8" data-sidebarbg="color_8" data-theme="default" >
<div class="lyear-layout-web" style="background-image: url('${pageContext.request.contextPath}/images/background3.jpg'); background-size: cover; background-attachment: fixed;">
    <div class="lyear-layout-container">
        <jsp:include page="common.jsp"/>

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" style="background-image: url('${pageContext.request.contextPath}/images/background3.jpg'); background-size: cover; background-attachment: fixed;">

                            <div class="card-toolbar clearfix">
                                <div class="toolbar-btn-action" >
                                    <a class="btn btn-primary m-r-5"  data-toggle="modal" id="add" data-target="#add-class" ><i class="mdi mdi-plus" ></i> 新增</a>
                                    <a class="btn btn-primary m-r-5"  href="api/excel"  ><i class="mdi mdi-plus" ></i> excel导出</a>
                                    <form class="pull-right search-bar" method="get" action="javascript:void(0);" role="form">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="selectKeyword" oninput="findAll(1)" placeholder="请输入关键字">
                                        </div>
                                    </form>
                                </div>
                            </div>


                            <div class="card-body">
                                <!-- 表格 -->
                                <div id='novel_table'></div>
                                <!-- 表格结束 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容结束-->
    </div>
</div>


<!-- 添加用户的弹出框 -->
<div class="modal fade" id="add-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearForm()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >添加小说</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addNovelForm" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addname">小说名称：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="addname" name="addname"  placeholder="请输入小说名称..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >小说类别：</label>
                        <div class="col-md-7">
                            <div  class='category_table1'></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addimage">小说封面：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="addimage" name="addimage"  placeholder="请输入小说封面..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addsummary">小说简介：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="addsummary" name="addsummary" placeholder="请输入小说简介..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addauthor1">小说作者：</label>
                        <div class="col-md-7">
                            <div  class='author_table1'></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearForm()">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="addNovel">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加班级的弹出框结束 -->


<!-- 修改用户的弹出框 -->
<div class="modal fade" id="modify-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearForm()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">修改小说</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateNovelForm" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <div class="col-md-7">
                            <input class="form-control" type="hidden" id="updateid">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="updatename">小说名称：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="updatename" name="updatename" placeholder="请输入小说名称..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >小说类别：</label>
                        <div class="col-md-7">
                            <div  class='category_table2'></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="updateimage">小说封面：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="updateimage"  placeholder="请输入小说封面..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="updatesummary">小说简介：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="updatesummary"  placeholder="请输入小说简介..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" >小说作者：</label>
                        <div class="col-md-7">
                            <div  class='author_table2'></div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearForm()">关闭</button>
                <button type="button" class="btn btn-primary" id="updateNovel" data-dismiss="modal">修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户的弹出框结束 -->

<!--对话框-->
<script type="text/html" id="all_novel">
    <%--主要表格--%>
    <table class="table table-bordered table-hover ">
        <thead>
        <tr>
            <th>id</th><th>小说名</th><th>类别</th><th>图片</th><th>简介</th><th>作者</th><th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{each data.list}}
        <tr>
            <td>{{$value.id}}</td>
            <td>{{$value.name}}</td>
            <td>{{$value.category}}</td>
            <%--<td>{{$value.image}}</td>--%>
            <td><img src="images/{{$value.image}}" height="80px" width="100px"></td>
            <td>{{$value.summary}}</td>
            <td>{{$value.author}}</td>
            <td>
                <button class="btn btn-info btn-xs" type="button" onclick="findById('{{$value.id}}')" data-toggle="modal" data-target="#modify-class" >
                    <span class="mdi mdi-lead-pencil"></span>修改
                </button>
                <button class="btn btn-danger btn-xs" type="button" onclick="deleteNovel('{{$value.id}}')" >
                    <span class="mdi mdi-close"></span>删除
                </button>
            </td>
        </tr>
        {{/each}}
        </tbody>
    </table>
    <%--主要表格结束--%>
    <!-- 分页-->
    <nav class="text-center">
        <ul class="pagination pagination-circle">
            {{if data.hasPreviousPage}}
                <li><a href="javascript:void(0);" onclick="findAll('{{data.pageNum-1}}')"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{else}}
                <li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
            {{/if}}
            {{each data.navigatepageNums}}
            {{if $value==data.pageNum}}
                <li class="active"><a href="javascript:void(0);">{{$value}}</a></li>
            {{else}}
                <li><a href="javascript:void(0);" onclick="findAll('{{$value}}')" >{{$value}}</a></li>
            {{/if}}
            {{/each}}
            {{if data.hasNextPage}}
            <li><a href="javascript:void(0);" onclick="findAll('{{data.pageNum+1}}')"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{else}}
            <li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
            {{/if}}
        </ul>
    </nav>
    <!-- 分页结束-->
</script>
<!--对话框end-->
<!--下拉框模板-->
<script type="text/html" id="all_category1">
    <select class="form-control" id="addcategory1" name="example-select" size="1">
        {{each data}}
        {{if $value.rank==2 }}
        <option value="{{$value.id}}">{{$value.parent}}-{{$value.name}}</option>
        {{/if}}
        {{/each}}
    </select>
</script>
<script type="text/html" id="all_category2">
    <select class="form-control" id="addcategory2" name="example-select" size="1">
        {{each data}}
        {{if $value.rank==2 }}
        <option value="{{$value.id}}">{{$value.parent}}-{{$value.name}}</option>
        {{/if}}
        {{/each}}
    </select>
</script>
<script type="text/html" id="all_author1">
    <select class="form-control" id="addauthor1" name="example-select" size="1">
        {{each data}}
        <option value="{{$value.id}}">{{$value.nickname}}</option>
        {{/each}}
    </select>
</script>
<script type="text/html" id="all_author2">
    <select class="form-control" id="addauthor2" name="example-select" size="1">
        {{each data}}
        <option value="{{$value.id}}">{{$value.nickname}}</option>
        {{/each}}
    </select>
</script>
<!--下拉框模板end-->
<script type="text/javascript">
    //刷新页面
    function findAll(id){
        $.ajax({
            url:"api/novel/page",
            type:"GET",
            data:{currentPage:id,keyword:$("#selectKeyword").val()},
            dataType:"JSON",
            success:function (resp){
                console.log(resp);
                if(resp.code===10000){
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html = template('all_novel', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('#novel_table').html(html);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }

    $(document).ready(function () {
        findAll(1);
    });

    function clearForm(){
        $("#addNovelForm").data('bootstrapValidator').resetForm(true);
        $("#updateNovelForm").data('bootstrapValidator').resetForm(true);
    }

    function findById(id){
        $.ajax({
            url:"api/novel/"+id,
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                selectCategory();
                selectAuthor();
                if(resp.code===10000){
                    $("#updateid").val(resp.data.id);
                    $("#updatename").val(resp.data.name);
                    $("#updateimage").val(resp.data.image);
                    $("#updatesummary").val(resp.data.summary);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
                return resp.data;
            }
        })
    }

    /*新增小说*/
    $("#addNovel").click(function (){
        $("#addNovelForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        $.ajax({
            url:"api/novel/add",
            type:"POST",
            contentType: "application/json;charset=utf-8", // 设置Content-Type为application/json
            data:JSON.stringify({name:$("#addname").val(),category_id: $("#addcategory1").val(),image:$("#addimage").val(),
                summary:$("#addsummary").val(),user_id: $("#addauthor1").val()}),
            dataType:"JSON",
            success:function (resp){
                $("#addNovelForm")[0].reset();
                if(resp.code===10000){
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    clearForm();
                    findAll(1);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    })

    /*获取分类*/
    function selectCategory(){
        $.ajax({
            url:"api/novel/category",
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html1 = template('all_category1', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('.category_table1').html(html1);
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html2 = template('all_category2', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('.category_table2').html(html2);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }

    /*获取作者*/
    function selectAuthor(){
        $.ajax({
            url:"api/novel/author",
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html1 = template('all_author1', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('.author_table1').html(html1);
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html2 = template('all_author2', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('.author_table2').html(html2);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }

    /*渲染下拉菜单*/
    $("#add").click(function (){
        selectCategory();
        selectAuthor();
    })

    $("#updateNovel").click(function (){
        $("#updateNovelForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        $.ajax({
            url:"api/novel/update",
            type:"POST",
            contentType: "application/json;charset=utf-8", // 设置Content-Type为application/json
            data:JSON.stringify({id:$("#updateid").val(),name:$("#updatename").val(),
                category_id: $("#addcategory2").val(),image:$("#updateimage").val(),
                summary:$("#updatesummary").val(),user_id: $("#addauthor2").val()}),
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    //$("#add-class").modal("hide");
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    clearForm();
                    findAll(1);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    })

    function deleteNovel(id){
        $.confirm({
            title: '删除小说',
            content: '确定删除该小说信息',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function(){
                        $.ajax({
                            url:"api/novel/"+id,
                            type:"DELETE",
                            dataType:"JSON",
                            success:function (resp){
                                findAll(1);
                                if(resp.code===10000){
                                    //$("#add-class").modal("hide");
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                }else {
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                }
                            }
                        })
                    }
                },
                cancel: {
                    text: '取消',
                },
            }
        });
    }

    /**
     *下面就是bootstrapValidator的初始化
     *定义你需要的哪些表单需要验证，验证什么内容
     **/
    $("#addNovelForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            addname:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入小说名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            },
        }
    });
    /**
     *下面就是bootstrapValidator的初始化
     *定义你需要的哪些表单需要验证，验证什么内容
     **/
    $("#updateNovelForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            updatename:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入用户名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            }
        }
    });

</script>
</body>
</html>